<route lang="json">
{
  "layout": "tabbar",
  "name": "setting",
  "style": {
    "navigationBarTitleText": "setting"
  }
}
</route>

<script lang="ts" setup>
import { useSettingPage } from './index'

const {
  actions,
  countInfo,
  userInfo,
  functionTypes,
  allServices,
  showActionSheet,
  switchTab: _switchTab,
  navigateTo,
  handleClose,
  handleSelect,
} = useSettingPage()

// 生命周期钩子
onLoad(() => {
  console.log('Setting page loaded')
})

onShow(() => {
  console.log('Setting page shown')
})
</script>

<template>
  <div class="main-bar">
    <!-- 顶部用户信息卡片 -->
    <div class="user-card">
      <div class="user-header">
        <image class="avatar" :src="userInfo?.avatar" mode="aspectFill" />
        <div class="user-info">
          <text class="nickname">
            {{ userInfo?.realname }}
          </text>
          <text v-if="userInfo.userIdentity === '2'" class="vip-tag">
            VIP会员
          </text>
          <text v-else class="none-vip-tag">
            普通用户
          </text>
        </div>
        <div v-if="allServices && allServices.length > 0" class="setting-icon" @click="navigateTo('/pages/setting/modules/user/index')">
          <wd-icon name="setting1" size="20" color="#333" />
        </div>
      </div>
      <div class="stat-row">
        <div class="stat-item">
          <text class="value">
            {{ countInfo.remind || 0 }}
          </text>
          <text class="label">
            提醒次数
          </text>
        </div>
        <div class="stat-item">
          <text class="value">
            {{ countInfo.account || 0 }}
          </text>
          <text class="label">
            账本
          </text>
        </div>
        <div class="stat-item">
          <text class="value">
            {{ countInfo.memo || 0 }}
          </text>
          <text class="label">
            备忘录
          </text>
        </div>
      </div>
    </div>

    <!-- 我的功能卡片 -->
    <div v-if="functionTypes && functionTypes.length > 0" class="function-card">
      <div class="card-header">
        <text class="title">
          我的服务
        </text>
        <!-- <div class="more" @click="switchTab('/pages/home/index')">
          <text>查看全部</text>
        </div> -->
      </div>
      <div class="function-list">
        <div
          v-for="(item, index) in functionTypes"
          :key="index"
          class="function-item"
          @click="navigateTo(item.path)"
        >
          <div class="icon-wrapper">
            <image :src="item.icon" mode="aspectFit" class="function-icon" />
            <text v-if="item.count" class="count-badge">
              {{ item.count }}
            </text>
          </div>
          <text class="function-name">
            {{ item.name }}
          </text>
        </div>
      </div>
    </div>

    <!-- 服务菜单列表 -->
    <div v-if="allServices && allServices.length > 0" class="service-list">
      <div
        v-for="(item, index) in allServices"
        :key="index"
      >
        <div
          v-if="item.path !== '/feedback'" class="service-item"
          @click="navigateTo(item.path)"
        >
          <div class="left">
            <div class="service-icon" :class="item.class">
              <wd-icon :name="item.icon" />
            </div>
            <text class="service-name">
              {{ item.name }}
            </text>
          </div>
          <div class="right">
            <text v-if="item.desc" class="desc">
              {{ item.desc }}
            </text>
          </div>
        </div>
        <div v-else class="service-item">
          <button open-type="feedback" class="reset-button flex flex-row-reverse">
            <div class="left">
              <div class="service-icon" :class="item.class">
                <wd-icon :name="item.icon" />
              </div>
              <text class="service-name">
                {{ item.name }}
              </text>
            </div>
          </button>
        </div>
      </div>
    </div>
  </div>

  <wd-action-sheet v-model="showActionSheet" :actions="actions" cancel-text="取消" :z-index="1000" @close="handleClose" @select="handleSelect" />
</template>

<style scoped lang='scss'>
@import './index.scss';
</style>
